<template>
	<view>
		<scroll-view scroll-y="true" :style="'height:'+ scrollH+'px;'">
			<block v-for="(item,index) in chatlist" :key="index">
				<user-chat-list :item="item" :index="index"
					:pretime="item>0?chatlist[index-1].create_time:0"></user-chat-list>
			</block>
		</scroll-view>

		<!-- 底部操作条 -->
		<view class="fixed-bottom flex align-center border-top bg-white" style="height: 100rpx;">
			<input v-model="content" class="bg-light ml-2 rounded flex-1" style="padding: 5rpx;" type="text"
				placeholder="请文明交流" />
			<view class="iconfont icon-fabu flex align-center justify-center 
			font-lg animate__animated 
			" hover-class="animate__jello" style="width: 100rpx;" @click="submit"></view>
		</view>
	</view>
</template>

<script>
	import userChatList from '@/components/user-chat/user-chat-list.vue'
	export default {
		components: {
			userChatList
		},
		data() {
			return {
				//我发送的聊天内容
				content: "",
				//聊天的可见区域高度
				scrollH: 500,
				chatlist: [{
					user_id: 2,
					avatar: "/static/jjy9.jpg",
					username: "鞠婧祎",
					data: "你好！我是鞠婧祎",
					type: "text",
					create_time: 1718614078
				}, {
					user_id: 1,
					avatar: "/static/jfm2.jpg",
					username: "lisi",
					data: "你好呀！你好呀！",
					type: "text",
					create_time: 1718914078
				}, {
					user_id: 2,
					avatar: "/static/jjy9.jpg",
					username: "lisi",
					data: "嗯呐",
					type: "text",
					create_time: 1718916078
				}]
			}

		},

		onLoad() {
			//加载时同时获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					//px 此处需要把得到的rpx转换成px uni.upx2px
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
		},
		methods: {
			//发送消息
			submit() {
				let obj = {
					user_id: 1,
					avatar: "/static/jfm2.jpg",
					username: "lisi",
					data: this.content,
					type: "text",
					create_time: (new Date().getTime())
				}
				if (this.content === '') {
					return uni.showToast({
						title: "你干什么！！"
					})
				}
				//向渲染聊天数据 数组中push当前聊天数据
				this.chatlist.push(obj)
				//发送完消息之后清空聊天输入框
				this.content = ""
			}
		}
	}
</script>

<style>

</style>